<script setup>
import { reactive, watch, watchEffect } from 'vue';
import { useRouter, useRoute } from 'vue-router'

const router = useRouter();
console.log( router );
console.log( router.getRoutes() );

// 获得当前正在访问的路由
const route = useRoute();
console.log( route );
console.log( route.params.id );

const state = reactive({
  name: 'Java程序设计',
  credit: 4
});

// 侦听 state 的变化
watch( state, (value, old) => {
  console.log( '侦听响应式对象:', value.name, old.name );
});

// 第一个参数只能是以下几种形式
// a getter/effect function
// a ref 
// a reactive object
// an array of these types
watch( () => state.name , (value, old, onCleanup) => {
  console.log( '侦听响应式对象的单个属性', value, old , onCleanup );
});

// 侦听路由参数的变化
watch( () => route.params.id , (id, old) => {
  console.log( '侦听路由参数的变化: ', id, old );
});

watchEffect( onCleanup => {
    console.log( state.name , onCleanup );
});

</script>

<template>
  <div>
    <input type="text" v-model="state.name">
    <input type="number" v-model.trim.number="state.credit">
    <p>名称: {{state.name}}, 学分: {{state.credit}}</p>
  </div>
</template>